<template>
    <view class="container">
        <view class="wrapper" v-if="config.loaded">
            <view class="text-title">
                <text class="title">{{ config.name }}</text>
                <text class="slogan">
                    <!-- {{ config.slogan }} -->
					        {{$t('slogan')}}
                </text>
            </view>
          <!--  <view class="flex-center" style="margin-bottom: 20px">
                <u-tabs :list="list1" @click="click"></u-tabs>
            </view> -->
           <!-- <view v-if="index == 0" class="flex-col">
                <uv-qrcode @click="save" ref="qrcode" :value="url1" :options="options"></uv-qrcode>
                <view class="btn" @click="down('android', url1)">
                    <image src="../../static/download/and.png" mode="aspectFit"></image>
                    <view class="text">
                        <view>Download(Customer)</view>
                    </view>
                </view>
            </view> -->
			 <!-- v-if="index == 1" -->
            <view class="flex-col">
                <uv-qrcode @click="save" ref="qrcode" :value="url2" :options="options2"></uv-qrcode>
                <view class="btn" @click="down('android', url2)">
                    <image src="../../static/download/and.png" mode="aspectFit"></image>
                    <view class="text">
                        <view>Download</view>
                    </view>
                </view>
            </view>
        </view>
        <text class="text-copyright">Copyright © {{ new Date().getFullYear() }} {{ config.copyright }} All rights reserved.</text>
    </view>
</template>
<script>
const app = getApp();
import { dict } from '../../lib/service';
import { APP_ROLE, CurrentRole } from '../../config';
import { downloadConfig } from '../../config';
import logo from '../../static/logo-agent.png';
import logo2 from '../../static/logo-agent.png';
export default {
    data() {
        return {
            weixin: false, //是否为微信内浏览器打开
            isShow: false,
            config: {},
            url1: '',
            url2: '',
            index: 0,
            list1: [
                {
                    value: 1,
                    name: 'Customer'
                },
                {
                    value: 2,
                    name: 'Agent'
                }
            ],
            options: {
                size: 186,
                useDynamicSize: false,
                errorCorrectLevel: 'Q',
                margin: 10,
                foregroundImageSrc: logo
            },
            options2: {
                size: 186,
                useDynamicSize: false,
                errorCorrectLevel: 'Q',
                margin: 10,
                // foregroundImageSrc: logo2
				foregroundImageSrc: logo
            }
        };
    },
    onLoad() {
        var config = {};
        uni.showLoading();
        var res = dict().then((res) => {
            var data = res.data;
            data.filter((item) => item.type == 'customConfig').map((item) => {
                config[item.keyName] = item.keyValue;
            });
            this.url1 = config.customerApkDownloadUrl;
            // this.url2 = config.agencyApkDownloadUrl;
			this.url2 = 'https://play.google.com/store/apps/details?id=uni.UNI7B56D28'
            this.config = {
                loaded: true,
                ...downloadConfig
            };
			console.log(this.config)
            uni.hideLoading();
        });

        //配置文件位置 static/config.js

        // 动态设置页面标题
        // this.setTitle();
        // 判断该页面是否为微信内置浏览器内打开 true>显示浏览器内打开引导
        this.isWX();
    },
    methods: {
        click(item) {
            this.index = item.index;
        },
        setTitle() {
            uni.setNavigationBarTitle({
                title: 'anta Download'
            });
        },
        isWX() {
            if (navigator) {
                let ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    this.weixin = true;
                } else {
                    this.weixin = false;
                }
            }
        },

        save() {
            this.$refs.qrcode.save();
        },
        down(type, url) {
            if (this.weixin) {
                uni.showModal({
                    content: 'Please click the button \n in the upper right corner to select open in the browser',
                    showCancel: false
                });

                this.isShow = true;
            } else {
                // #ifdef H5
                window.location.href = url;
                // #endif

                // #ifdef APP-PLUS || APP
                plus.runtime.openURL(url);
                // #endif
            }
        },
        download(openUrl) {
            uni.showLoading();
            uni.downloadFile({
                url: openUrl,
                success: function (res) {
                    uni.hideLoading();

                    var filePath = res.tempFilePath;

                    uni.openDocument({
                        filePath: filePath,
                        showMenu: true,
                        success: function (res) {}
                    });
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
page {
    background: #ffffff;
}

.container {
    padding-top: 20px;
    position: relative;
    width: 100vw;
    overflow: hidden;
    background: #fff;

    .wrapper {
        background: #fff;
    }

    .text-title {
        margin-top: 50px;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        .title {
            font-size: 24px;
        }
        .slogan {
            margin-top: 20px;
            margin-bottom: 50px;
            color: #999;
            font-size: 16px;
        }
    }

    .text-slogan {
        font-size: 32rpx;
        margin-top: 10rpx;
        margin-left: 110rpx;
        font-weight: normal;
        color: #999;
    }

    .flex-col {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        image {
            width: 250px;
            height: 250px;
        }
    }

    .btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #037eff;
        border-radius: 20rpx;
        color: #ffffff;
        padding: 20rpx 30rpx;
        margin-top: 60rpx;

        image {
            width: 30px;
            height: 30px;
        }

        .text {
            margin-left: 20rpx;
            font-weight: bold;

            view:nth-child(1) {
                font-size: 34rpx;
            }

            view:nth-child(2) {
                font-size: 28rpx;
            }
        }
    }

    .btn:active {
        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
        opacity: 0.9;
        transform: translate(1rpx, 1rpx);
    }

    .text-copyright {
        color: #bebebe;
        font-size: 24rpx;
        left: 0;
        position: fixed;
        bottom: 0;
        text-align: center;
        width: 100%;
        margin-bottom: 30rpx;
    }

    .wx {
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.7);
        width: 100vw;
        height: 100vh;
        z-index: 99;
    }

    .wx-image {
        position: absolute;
        right: 0;
        top: 0;
        margin-right: 20rpx;
    }

    .logo-image {
        width: 90rpx;
        margin-right: 20rpx;
    }
}
</style>